<!--
 * @Descripttion: 搜索控件（高级插槽）
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-17 15:11:27
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-24 16:19:44
-->
<template>
  <!--基本查询-->
  <div class="query-boxes">
    <div class="basic-search">
      <input
        type="text"
        placeholder="产品研发"
      >
      <input
        type="text"
        placeholder="产品ID或产品名称"
      >
      <div class="query-box">
        <i class="el-icon-search"></i>
        <span
          class="advanced-query"
          @click="showAdvancedQuery"
          :class="{'bold-fonts': !isHidden}"
        >
          高级查询
          <i class="el-icon-arrow-down" />
        </span>
      </div>
    </div>
  </div>

  <!--高级查询-->
  <div
    class="advanced-query-box"
    :class="{'show-advanced-query': isHidden}"
  >
    <p class="title">高级查询</p>
    <div class="content">
      <div class="belongTo">
        <span
          v-if="belongTo === 0"
          class="belong-to-title"
        >
          归属
        </span>
        <span
          v-else
          class="belong-to-title"
        >
          数据归属
        </span>
        <template
          v-for="(item, index) in belongToArray"
          :key="index"
        >
          <button
            class="unselect-button"
            :class="{'selected': isSelected === index}"
            @click="selectCompany(index)"
          >
            {{ item }}
          </button>
        </template>
      </div>
      <div>
        <slot name="config"></slot>
        <slot></slot>
      </div>
    </div>
    <div
      class="bottom-box"
    >
      <button class="bottom-button">清空条件</button>
      <button
        class="bottom-button"
        @click="showAdvancedQuery"
      >
        收起高级选项
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'

export default defineComponent({
  components: {
  },
  props: {
    // 高级查询第一行标题: 1、归属：0；2、数据归属：!0
    belongTo: {
      type: Number,
      default: 0
    }
  },
  setup() {
    const isHidden = ref(true)
    const isSelected = ref(-1)
    const methods = reactive({
      belongToArray: ['本公司', '其它公司'],
      showAdvancedQuery() {
        isHidden.value = !isHidden.value
      },
      // 高级查询选择公司归属
      selectCompany(index: number) {
        if (isSelected.value === index) {
          isSelected.value = -1
        } else {
          isSelected.value = index
        }
      }
    })
  
    return {
      isHidden,
      isSelected,
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="scss" scoped>
// 基本查询
.query-boxes {
  width: 100%;
}
.basic-search {
  width: 100%;
  height: 30px;
  display: grid;
  grid-template-columns: 20% 47% 25%;
  grid-column-gap: 3%;
  .el-icon-search {
    border: 1px solid #D7D7D7;
    height: 30px;
    width: 30px;
    font-size: 20px;
    color: #D7D7D7;
    position: relative;
    &::before {
      position: absolute;
      left: 5px;
      top: 5px;
    }
  }  
  .query-box {
    display: flex;
  }
  .advanced-query {
    border: 1px solid #D7D7D7;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 14px;
    user-select: none;
    &:hover {
      cursor: pointer;
    }
    .el-icon-arrow-down {
      color: #D7D7D7;
    }
  }
  
}

// 高级查询
.show-advanced-query {
  display: none;
}
.bold-fonts {
  font-weight: 700;
}
.advanced-query-box {
  width: 190%;
  border: 1px solid #D7D7D7;
  margin-top: 10px;
  padding: 0 20px 20px 10px;
  .title {
    color: #7F7F7F;
  }
  .belong-to-title {
    display: inline-block;
    width: 60px;
    text-align: right;
    margin-right: 10px;
  }
  .unselect-button {
    border: 1px solid #C9C9C9;
    color: #333333;
    background-color: #fff;
    margin-right: 13px;
    padding: 5px 15px;
    border-radius: 2px;
  }
  .selected {
    border: 1px solid #0099FF;
    font-weight: 700;
  }

  .bottom-box {
    text-align: right;
    margin-top: 35px;
  }
  .bottom-button {
    border: none;
    background-color: #fff;
    color: #169BD5;
    cursor: pointer;
  }
}
</style>
